<template>
  <!-- 我的学习卡 -->
  <div class="myStudyCardInfoBox">
    <x-header :left-options="{showBack: true,backText:'我的学习卡详情'}" class="headerBox"></x-header>
    <div class="cardBox">
      <img class="cardBg" src="../assets/images/overdue03.png" />
      <div class="cardTitle">
        <img src="../assets/images/overdue08.png" />
        <div>润禾教育网络学习卡</div>
      </div>
      <div class="cardMiddle">
        <div>学习卡金额(元)</div>
        <div>200.00</div>
      </div>
      <div class="cardBottom">
        <div>NO.16258483258432</div>
        <div>使用期限 2018/1/10 至 2019/1/10</div>
      </div>
    </div>
    <div class="cardTagBox clearfix">
      <div class="cardTag">
        <img src="../assets/images/styletag01.png" />
        <div>一流教学体系</div>
      </div>
      <div class="cardTag">
        <img src="../assets/images/styletag02.png" />
        <div>全程名师辅导</div>
      </div>
      <div class="cardTag">
        <img src="../assets/images/styletag04.png" />
        <div>独家精准预测</div>
      </div>
      <div class="cardTag">
        <img src="../assets/images/styletag03.png" />
        <div>权威品牌信赖</div>
      </div>
    </div>
    <div class="cardFlow">
      <div class="cardFlow_title">会员卡学习流程</div>
      <div class="carFlow_con">
        <div></div>
        <div>注册并登陆状元云网站官网WWW.ZYY.COM；</div>
      </div>
      <div class="carFlow_con">
        <div></div>
        <div>进入会员中心点击网络学习卡按钮；</div>
      </div>
      <div class="carFlow_con">
        <div></div>
        <div>在登陆页面输入会员卡密码激活，进入听课页面学习。</div>
      </div>
    </div>
  </div>
</template>

<script>
import { XHeader, Swipeout, SwipeoutItem, SwipeoutButton } from 'vux'
export default {
  components: {
    XHeader,
    Swipeout,
    SwipeoutItem,
    SwipeoutButton
  },
  data() {
    return {
      cardList: [
        {
          title: '润禾教育网络学习卡',
          cardNum: 'NO.16258485',
          money: 200,
          startTime: '2018/1/10',
          endTime: '2019/1/10',
          overdue: false,
        },
        {
          title: '润禾教育网络学习卡',
          cardNum: 'NO.16258485',
          money: 500,
          startTime: '2018/1/10',
          endTime: '2019/1/10',
          overdue: false,
        },
        {
          title: '润禾教育网络学习卡',
          cardNum: 'NO.16258485',
          money: 1000,
          startTime: '2018/1/10',
          endTime: '2019/1/10',
          overdue: false,
        },
        {
          title: '润禾教育网络学习卡',
          cardNum: 'NO.16258485',
          money: 1000,
          startTime: '2018/1/10',
          endTime: '2019/1/10',
          overdue: true,
        }
      ]
    }
  },
  methods: {
    onButtonClick(type) {
      alert('on button click ' + type)
    },
    handleEvents(type) {
      console.log('event: ', type)
    }
  },
}
</script>

<style lang="less" scoped>
.myStudyCardInfoBox {
  padding: 0 20px;
  /deep/.headerBox {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
  }
  // 卡片样式

  .cardBox {
    width: 100%;
    margin: 0 auto;
    height: 350px;
    margin-top: 30px;
    position: relative;
    border-radius: 30px;
    box-shadow: 0 10px 30px #d7d9dc;
    overflow: hidden;
    .cardBg {
      width: 100%;
      height: 100%;
    }
    .cardTitle {
      display: flex;
      position: absolute;
      top: 20px;
      left: 20px;
    }
    .cardTitle img {
      width: 35px;
      height: 35px;
      margin-right: 20px;
      margin-top: 5px;
    }
    .cardTitle div {
      color: #fff;
      font-size: 30px;
    }
    .cardMiddle {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      text-align: center;
    }
    .cardMiddle div:nth-child(1) {
      font-size: 28px;
    }
    .cardMiddle div:nth-child(2) {
      margin-top: 10px;
      font: 600 70px '微软雅黑';
    }
    .cardBottom {
      position: absolute;
      position: relative;
      left: 20px;
      bottom: 70px;
      color: #fff;
      font-size: 24px;
      display: flex;
    }
    .cardBottom div:nth-child(2) {
      position: absolute;
      bottom: 0;
      right: 40px;
    }
  }
  /* 学习卡标签内容样式 */
  .cardTagBox {
    margin: 50px 0;
    padding-left: 25px;
    .cardTag {
      float: left;
      width: 45%;
      display: flex;
      margin: 20px 16px;
    }
    .cardTag img {
      width: 50px;
      height: 50px;
      margin-right: 20px;
    }
    .cardTag:nth-child(1) img {
      width: 60px;
      height: 50px;
      margin-left: -10px;
      margin-right: 20px;
    }
    .cardTag div {
      color: #616162;
      font: 600 35px '微软雅黑';
    }
  }
  .cardFlow {
    .cardFlow_title {
      font: 600 34px '微软雅黑';
      padding-bottom: 20px;
      border-bottom: 2px solid #efefef;
    }
    .carFlow_con {
      display: flex;
      align-items: center;
      margin: 30px 0;
    }
    .carFlow_con:nth-child(2) {
      margin-top: 50px;
    }
    .carFlow_con div:nth-child(1) {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #656565;
      margin-right: 30px;
    }
    .carFlow_con div:nth-child(2) {
      font-size: 26px;
    }
  }
}
</style>